List Rendering

v-for with an Array of Object

<ul id="app">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/pstyqm0b/1/

v-for with Object

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/k6rgyoLt/1/

v-for with a Range

<div id="app">
  <span v-for="n in 10">{{ n }} </span>
</div>

new Vue({
  el: '#app',
})

附上 fiddle https://jsfiddle.net/hunterliu/jyh6dt64/

v-for vs v-if

若 v-for 和 v-if 存在同一個節點，v-for 優先於 v-if。

簡單改寫 v-for array of object 的範例：

<ul id="app">
  <li v-for="item in items" v-if="item.isShow">
    {{ item.message }}
  </li>
</ul>

var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo', isShow: true},
      { message: 'Bar', isShow: false}
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/o3j028zs/1/

若需判斷是否要執行 v-for，可以將 v-if 放在外層。

改寫上面範例：

<ul id="app" v-if="items.length">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo'},
      { message: 'Bar'}
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/kfd4ksa1/1/

參考資料

• Vue.js: List Rendering

另一個鐵人賽挑戰題目連結「每天學一個 Lodash.js的函式」